﻿<%@ Page Language="C#" MasterPageFile="~/default.master" AutoEventWireup="true"
    CodeBehind="Profiler.aspx.cs" Inherits="Chinook.Web.Profiler" %>
<asp:Content ID="Content1" ContentPlaceHolderID="BodyContentPlaceholder" runat="Server">
    <div id="phProfiler"></div>    
    <div id="dvRegistrationForm">        
        <table>      
            <tr>
                <td>
                    <label for="txtTitle">
                        <%=Resources.Chinook.Form.Labels.lblClass%></label>
                </td>
                <td>
                   <asp:DropDownList ID="dropClassName" runat="server"></asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="txtFirstName">
                        <%=Resources.Chinook.Form.Labels.lblMethod%></label>
                </td>
                <td>
                    <asp:DropDownList ID="dropMethodName" runat="server">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="txtLastName">
                        <%=Resources.Chinook.Form.Labels.lblDateRange%></label>
                </td>
                <td>
                    <input type="text" class="text date" title="date" id="txtStart" tabindex="3" />
                    &nbsp;
                    to
                    &nbsp;
                    <input type="text" class="text date" title="date" id="txtEnd" tabindex="3" />
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <input type="submit" id="btnSearch" value="Search" class="button medium blue"
                        tabindex="12" />
                </td>
            </tr>
        </table>
    </div>
    <div>
        <table>
            <tr>
                <td>
                </td>
            </tr>
            <tr class="YUI_CAT_PAGER">
                <td>
                    <table>
                        <tr>
                            <td>
                                <span id="paginate"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div id="profilerDatatable">
                                </div>
                            </td>
                        </tr>                     
                    </table>
                </td>
            </tr>
            <tr id="sorry">
            <td>
            <span style="color:Red;"> Sorry no records found!...</span>
            </td>
            </tr>
        </table>
    </div>
    
    <p>&nbsp;</p>
        <table class="profilerGrid" style="display: none">
        </table>

    <script type="text/javascript">
    
        
        
        var ds = [];

        //--------------------------------------------------------------------------------------------------
        // 
        //--------------------------------------------------------------------------------------------------
        $(function() {
        $("#phProfiler").grouptitle({ classname: "vm-frm-title-red", title: "Log4Net Profiler" }); 
        
               $("#btnSearch").click(btnSearchHandler);
                //$("#btnSearch").click(InvokeFlexiGrid);
                setTimeout("BuildProfilerGrid()", 0);
        });
        //--------------------------------------------------------------------------------------------------
        // 
        //--------------------------------------------------------------------------------------------------
        function btnSearchHandler() {
            var ProfilerRequest = {};
            ProfilerRequest.ClassName = $("#ctl00_BodyContentPlaceholder_dropClassName").val();
            ProfilerRequest.MethodName = $("#ctl00_BodyContentPlaceholder_dropMethodName").val();
            ProfilerRequest.Start = $("#txtStart").val();
            ProfilerRequest.End = $("#txtEnd").val();

            var params = JSON.stringify({ 'profilerRequest': ProfilerRequest });

            
                $.ajax({
                    type: "POST",
                    url: _absWebRoot + "ProfilerWebService.asmx/GetProfilerLogs",
                    data: params,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnprofilerSuccess,
                    error: OnprofilerError
                });              
                return false;
        }
        //--------------------------------------------------------------------------------------------------
        // 
        //--------------------------------------------------------------------------------------------------
        function OnprofilerSuccess(res) {


            $(".profilerGrid").flexigrid().flexAddData(formatCustomerResults(res))

            $(".profilerGrid").flexigrid().flexReload();
            return false;
            
        
            //1)Delare a variable to specifiy the identitifer for the datatable
            var dataTableName = "dtProfiler";

            if (res.d.ProfilerViewModels.length == 0) {
                $(".YUI_CAT_PAGER").hide();
                $("#sorry").show();
                return false;
            }
            $("#sorry").hide();
            $(".YUI_CAT_PAGER").show();
            
        
            //Datasource
            for (var i = 0; i < res.d.ProfilerViewModels.length; i++) {
                ds[i] = res.d.ProfilerViewModels[i];
            }
            

            

            //2)Declare a varibale to specify the div name where the datatable should be rendered in the DOM i.e. container
            var containerName = "profilerDatatable";
            //3)
            var columns = []; //the columns format will be like this "key | label | sortable | sort order | resizeable|Formatter|Width" delimited by pipe symbol (|)
            var columnDefinitionString = "ClassName|Class Name|false|null|false|null|225*MethodName|Method Name|false|null|false|null|null*ExecutionTime|Response Time (sec)|false|null|false|null|null*ExecutionDateAndTime|Execution Date|false|null|false|FormatterDate|125";
            columns = columnDefinitionString.split('*');
            for (z = 0; z < columns.length; z++) {
                columns[z] = columns[z].split('|');
            }
            //4)Declare the list of db columns we need it for the datasource delimited by pipe symbol (|)
            var dbCols = 'ClassName|MethodName|ExecutionTime|ExecutionDateAndTime';

            var Formatters = 'FormatterDate';
            var PagenatorConfig = '["paginate"]|25|[5,10,15,20,25]|8| <strong>{CurrentPageReport}</strong> {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown} |<font color="#000000"><b><font color="green">{totalRecords} records found </font></b></font>';

            var DTConfig = [];
            DTConfig[0] = null;
            DTConfig[1] = "Cell_Clicked";
            DTConfig[2] = null; 
            DTConfig[3] = "100%";
            DTConfig[4] = null;

            MakeDataTable(dataTableName
                , containerName
                , columns
                , dbCols.split('|')
                , ds
                , PagenatorConfig
                , Formatters
                , DTConfig);
                
            return false;

        }

        function OnprofilerError(res) {
            alert(res);
        }

        //----------------------------------------------------------------------------------------------------------------
        //Formatter for the DateAssigned column ( Call the function in the DatatableHelper.js
        //----------------------------------------------------------------------------------------------------------------
        function FormatterDate(elCell, oRecord, oColumn, oData) {
            elCell.innerHTML = YUIDateFormatDMMMYYYY(oData, "%d-%b-%Y");
        }

        /*Flexi Grid*/

        function InvokeFlexiGrid() {
            var ProfilerRequest = {};
            ProfilerRequest.ClassName = $("#ctl00_BodyContentPlaceholder_dropClassName").val();
            ProfilerRequest.MethodName = $("#ctl00_BodyContentPlaceholder_dropMethodName").val();
            ProfilerRequest.Start = $("#txtStart").val();
            ProfilerRequest.End = $("#txtEnd").val();

            var params = JSON.stringify({ 'profilerRequest': ProfilerRequest });

        
        }
        
        function BuildProfilerGrid() {
            $(".profilerGrid").flexigrid({           
           dataType: 'json',
                colModel: [
		{ display: 'ClassName', name: 'ClassName', width: 350, sortable: true, align: 'left' },
		{ display: 'MethodName', name: 'MethodName', width: 250, sortable: true, align: 'left' }
		],
                buttons: [
		{ name: 'Add', bclass: 'add', onpress: test },
		{ name: 'Delete', bclass: 'delete', onpress: test },
		{ separator: true }
		],
                searchitems: [
		{ display: 'ClassName', name: 'ClassName' },
		{ display: 'MethodName', name: 'MethodName', isdefault: true }
		],
		sortname: "ClassName",
                sortorder: "asc",
                usepager: true,
                title: 'Profiler',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 700,
                height: 200
            });
        }
        function test() {

        }

        function formatCustomerResults(res) {          
            var rows = Array();            
            for (i = 0; i < res.d.ProfilerViewModels.length; i++) {
            var item = res.d.ProfilerViewModels[i];
            rows.push({ cell: [item.ClassName,item.MethodName]});}

            return {
            total: res.d.ProfilerViewModels.length,
            page: 1,
            rows: rows
     };
 }
    </script>
</asp:Content>
